{% extends "base.html" %}

{% block style %}
    <link rel="stylesheet" type="text/css" href="/static_media/css/user/editImage.css">
{% endblock style %}

{% block script %}
<script type="text/javascript">
    function OnDropDownChange(dropDown) {
        var selectedValue = dropDown.options[dropDown.selectedIndex].value;
        document.getElementById("outcrop").value = selectedValue;
    }
 </script>
{% endblock script %}

{% block content %}
		<!-- .left -->
		<div class="left">
			<div id="accordionMenu" class="accordion">
				<style type="text/css">
		.accordion #one:target .heading + .menuContent {
			height:{{height}}px;
		}
		</style>
				<div id="one" class="section">
					<div class ="heading"> <a href="#one">My Excursions</a> </div>
					<div class="menuContent">
						<ul>
							{% for excursion in my_excursions %}
							<li> <a href="/user/excursion/{{ excursion.pk }}/ ">{{ excursion.name }}</a> </li>
							{% endfor %}
						</ul>
					</div>
				</div>
				<div id="two" class="section">
					<div class ="heading"> <a href="#two">My Images</a> </div>
					<div class="menuContent">
						<ul>
							<li> <a href="/user/images/">My Images</a> </li>
						</ul>
					</div>
				</div>
				<div id="three" class="section">
					<div class ="heading"> <a href="#three">Create</a> </div>
					<div class="menuContent">
						<ul>
							<li> <a href="/user/new_excursion/">Excursion</a> </li>
						</ul>
					</div>
				</div>
			</div>
		</div>
		<!-- end .left --> 
		
		<!-- .right -->
		<div class="right">
			<div class="item">
				<div id="thumbImage">
					<img src="{{ image.image.thumb.url }}" alt="{{ image.name }}" class="image"/>
				</div>
				<div id="form">
					<form action="/user/images/edit/{{image.pk}}/" method="post">
						{% csrf_token %}
						<div class="fieldError"> {{ form.non_field_errors }} </div>
						<label for="id_excursion" class="fieldHeading" >Name</label>
						<div class="fieldError"> {{ form.name.errors }} </div>
						<div class="fieldWrapper"> {{ form.name }} </div>
						
						<label for="id_description" class="fieldHeading" >Notes</label>
						<div class="fieldError"> {{ form.notes.errors }} </div>
						<div class="fieldWrapper"> {{ form.notes }} </div>
						
						<div class="fieldHeading"> Outcrop </div>
						
						<input type="number" hidden="hidden" name="outcrop" value="-1" id="outcrop">
						{% if outcrops %}
							<select name="outcropList" id="outcropList" onChange="OnDropDownChange(this);">
								{%for outcrop in outcrops%}
								<option value="{{outcrop.pk}}">{{outcrop.name}} </option>
								{%endfor%}
							</select>
						{% else %}
							<div class="fieldInfo"> There are no outcrops attached to this image's excursion. </div>
						{%endif%}
						<input type="submit" value="Save Changes" id="saveButton" class="button"/>
					</form>
				</div>
			</div>
		<!-- end .right -->
{% endblock content %}
